<template>
    <div>
        <div class="p-user-center p-change-pwd" style="min-height:100%;">
            <div class="back-ground">
            </div>
            <div class="page-body">
                <div class="user-profile">
                    <div class="avatar">
                        <div style="width: 160px; height: 160px;">
                            <img class="personalImg" :src="imgUrl+user.userImg"
                                 style="border-radius: 50%;">
                        </div>
                    </div>
                    <div class="user-info">
                        <div class="name-row">
                            <span class="name">{{user.username}}</span>
                            <a target="_self" href="/personalPage" class="user-home-link">
                                个人页面&gt;&gt;
                            </a>
                        </div>
                        <div class="describe">
                            {{user.introduction}}
                        </div>
                        <a title="修改个人资料" href="personalSetting" class="icon-edit">
                            <i class="el-icon-edit"></i>
                        </a>
                    </div>
                </div>
                <div id="content-area" class="content-area">
                    <div class="left-nav">
                        <a href="/myLikes" :class="{active:shows==1}" class="nav-item">
                            <i class="fonts icon-favorites-fill"></i>
                            我喜欢的
                        </a>
                        <a href="/personalWorks" :class="{active:shows==2}" class="nav-item">
                            <i class="fonts el-icon-s-management"></i>
                            作品管理
                        </a>
                        <a href="/myDemands" :class="{active:shows==7}" class="nav-item">
                            <i class="fonts el-icon-s-promotion"></i>
                            我的需求
                        </a>
                        <a href="/myOrders" :class="{active:shows==3}" class="nav-item">
                            <i class="fonts el-icon-s-order"></i>
                            我的订单
                        </a>
                        <!--                        <a href="" :class="{active:shows==4}" class="nav-item">-->
                        <!--                            <i class="fonts el-icon-message-solid"></i>-->
                        <!--                            最新消息-->
                        <!--                        </a>-->
                        <a href="/personalSetting" :class="{active:shows==5}" class="nav-item">
                            <i class="fonts el-icon-s-tools"></i>个人设置
                        </a>
                        <a href="/changePassword" :class="{active:shows==6}" class="nav-item">
                            <i class="fonts el-icon-key"></i>
                            修改密码
                        </a>
                    </div>
                    <div class="content-header">
                        <div>
                            我的需求
                        </div>
                        <div class="main-container">
                            <ul class="demand_ul_list">
                                <li v-for="(item,index) in demands" :key="index" class="demands_list"
                                    >
                                    <div class="demand_item" @click="targetDemandUrl(item.demandId)">

                                        <div class="demand_name">{{item.demands}}</div>
                                        <span class="rmb"> RMB</span>
                                        <span class="demand_price">{{item.priceLow }} - {{item.priceHigh}}</span>
                                        <div class="project-cell__badge-wrapper">
                            <span class="credit-level-icon stage-badge project-cell__icon
                             stage-badge--label">{{item.style}}</span>
                                        </div>

                                        <div class="project-cell__info-row">
                                            <div class="project-cell__info-content">
                                                <i class="el-icon-price-tag">
                                                </i>{{item.categoryName}}
                                            </div>
                                            <div class="project-cell__info-wrapper">
                                                <div class="project-cell__info-content_date">
                                                    <i class="el-icon-date"></i>
                                                    {{$moment(item.closingDate).format("YYYY-MM-DD")}}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="project-cell__summary-wrapper">
                                            详情摘要
                                            <div class="detail">
                                                {{item.requirements}}
                                            </div>
                                        </div>

                                    </div>
                                    <div>
                                        <el-button
                                                style="right:10px;margin-top:10px;background-color: #adb3fb;color: white"
                                                @click="deleteDemand(item)">删除需求
                                        </el-button>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>

                <div>
                    <el-form class="content-body"
                             ref="form" :model="user" label-width="80px">
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
  import {selectUser} from "@/assets/api/userApi";
  import {deleteDemandById, selectDemandsByUserId} from "@/assets/api/demandsApi";
  import {getCurrentInstance, onBeforeMount, ref} from "vue";
  import {useRouter} from "vue-router";
  import {ElMessage, ElMessageBox} from "element-plus";

  const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
  const router = useRouter();
  const active = ref("");
  const user = ref({});
  const demands = ref([{}]);
  const shows = ref(7);


  const targetDemandUrl = (value) => {
    router.push({path: '/demandDetails', query: {id: value}})
  };
  const getUserInformation = () => {
    user.userId.value = localStorage.userId;
    selectUser(user).then((res) => {
      user.value = res.data;
    })
  };
  const getMyDemands = () => {
    selectDemandsByUserId(user).then((res) => {
      demands.value = res.data.data;
    })
  };
  const deleteDemand = (demand) => {
    const confirmResult = ElMessageBox.confirm(
        '是否确认删除该需求?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
      let data = {};
      data.demandId = demand.demandId.value;
      data.username = localStorage.username;
      deleteDemandById(data).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.message);
          getMyDemands();
        } else if (res.code === -10) {
          ElMessage.error(res.message)
        } else {
          ElMessage.error("删除失败")
        }
      })
    }).catch(() => {
      ElMessage.info('已取消删除');
    });
  };
  onBeforeMount(() => {
    getUserInformation();
    getMyDemands();
  });

</script>

<style scoped>

    .p-user-center {
        position: relative;
        padding-top: 70px;
        padding-bottom: 120px;
        background: #f4f4f4;
    }

    .back-ground {
        background-image: url("@/assets/img/personalPageBg.png");
        background-repeat: repeat;
        background-size: 100% 100%;
        position: absolute;
        height: 300px;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }

    .page-body {
        width: 1200px;
        margin: 0 auto;
        z-index: 1;
        position: relative;
    }

    .user-profile {
        display: flex;
    }

    .personalImg {
        height: 160px;
        width: 160px;
    }

    .avatar {
        height: 160px;
        width: 160px;
    }


    .user-info {
        flex-grow: 1;
        margin-left: 40px;
    }

    .name-row {
        height: 40px;
        display: flex;
        align-items: center;
    }

    .name {
        font-size: 30px;
        color: #fff;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
    }

    .describe {
        height: 28px;
        font-size: 16px;
        color: #aaa;
        line-height: 21px;
        margin-top: 16px;
        word-break: break-all;
    }

    .icon-edit {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #000;
        background: #fff;
        width: 50px;
        height: 50px;
        margin-top: 26px;
        font-size: 20px;
        text-decoration: none;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
        color: #adb3fb;
        text-decoration: none;
    }

    .left-nav {
        margin-top: 100px;
        width: 223px;
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        float: left;
        height: 700px;
    }

    .nav-item:not(:first-of-type) {
        margin-top: 20px;
    }

    .nav-item {
        display: flex;
        align-items: center;
        color: #2f2f2f;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        position: relative;
        text-decoration: none;
    }

    .fonts {
        font-size: 24px;
        margin-right: 10px;
    }

    .content-header {
        width: 80%;
        height: 57px;
        background: #fff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 0 20px 0 16px;
        font-size: 18px;
        font-weight: 600;
        color: #2f2f2f;
        float: right;
        margin-top: 100px;
    }

    .content-body {
        padding: 52px 39px 40px;
        background: #fff;
        border-radius: 4px;
        margin-top: 182px;
        width: 80%;
        max-width: 1199px;
        margin-left: 242px;
        height: 619px;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .stage-badge--label {
        padding: 3px 5px 3px 9px;
        border-radius: 2px;
        border: 1px solid #ececec;
        border-left: none;
        font-size: 12px;
        line-height: 14px;
        position: relative;
        overflow: hidden;
        background: #f8f8f8;
        color: #4a4a4a;
        font-weight: 400;
    }

    .project-cell__info-row {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .project-cell__info-content {
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
    }

    .project-cell__summary-wrapper {
        border-top: 1px solid #ececec;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        color: #222222;
    }

    a {
        color: #00a8e9;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }

    .rmb {
        color: #adadad;
        font-size: 12px;
    }

    .detail {
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 15px;
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .main-container {
        width: 1200px;
        margin: 30px auto 0 auto;
        flex: 1;
    }

    .demand_item {
        width: 300px;
        height: 200px;
        background-color: white;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    .project-cell__badge-wrapper {
        font-size: 0;
        min-height: 22px;
        margin-top: 25px;
        display: flex;
        margin-left: 15px;
    }

    .stage-badge--label {
        padding: 3px 5px 3px 9px;
        border-radius: 2px;
        border: 1px solid #ececec;
        border-left: none;
        font-size: 12px;
        line-height: 14px;
        position: relative;
        overflow: hidden;
        background: #f8f8f8;
        color: #4a4a4a;
        font-weight: 400;
    }

    .project-cell__info-row {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .project-cell__info-content {
        margin-left: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
    }

    .project-cell__info-content_date {
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
        margin-right: 20px;
    }

    .project-cell__summary-wrapper {
        border-top: 1px solid #ececec;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        color: #222222;
        margin-left: 10px;
    }

    a {
        color: #adb3fb;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }

    .active {
        color: #adb3fb;
    }

    .rmb {
        float: right;
        color: #adadad;
        font-size: 12px;
        margin-right: 10px;
    }

    .detail {
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 15px;
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .demands_list {
        float: left;
        padding: 10px;
        list-style: none;
        border-radius: 10px;
        cursor: pointer;
    }

    .demand_ul_list {
        position: relative;
        left: -85px;
        top: 261px;
    }

    .demand_name {
        font-weight: bold;
        position: relative;
        top: 20px;
        left: 20px;
    }

    .demand_price {
        float: right;
        margin-right: 5px;
        font-weight: bold;
        color: cornflowerblue;
    }

</style>
